{% extends "../base.html" %}
{% load admin_utils %}

{% block main_content %}
<div id="app-memberships-wrapper">
    <h3>特性管理</h3>

    <bk-table style="margin-top: 15px;"
        :data="featureFlagList">
        <bk-table-column type="index" label="序列" align="center" width="60"></bk-table-column>
        <bk-table-column label="特性名称" prop="role.name">
            <template slot-scope="props">
                <span>$[ featureToName(props.row.name) ]</span>
            </template>
        </bk-table-column>
        <bk-table-column label="状态">
            <template slot-scope="props">
                <bk-switcher v-model="props.row.effect" show-text on-text="允许" off-text="拒绝" @change="handleChange(props.row)"></bk-switcher>
            </template>
        </bk-table-column>
    </bk-table>
</div>
{% endblock %}

{% block main_script %}
<script>
    const application = {{ application | to_json }}

    const APP_FEATUREFLAG_CHOICES = {{ APP_FEATUREFLAG_CHOICES | to_json }}

    const featureFlagList = {{ feature_flag_list | to_json }}

    const featureToName = function (value) {
        for(key of Object.keys(APP_FEATUREFLAG_CHOICES)){
            if(key === value){
                return APP_FEATUREFLAG_CHOICES[key]
            }
        }
        return undefined
    }

    const URLRouter = {
        list: decodeURI("{% url 'admin.applications.detail.base_info.feature_flags.api' application.code %}"),
        detail: decodeURI("{% url 'admin.applications.detail.base_info.feature_flags.api' application.code %}"),
    }

    document.addEventListener('DOMContentLoaded', () => {
        new Vue({
            el: "#app-memberships-wrapper",
            delimiters: ['$[', ']'],
            data: function () {
                return {
                    application,
                    loading: false,
                    loaded: false,
                    form: {
                        feature: undefined,
                        isEffect: false,
                    },
                    featureFlagList,
                    APP_FEATUREFLAG_CHOICES,
                }
            },
            mounted: function () {
                this.fetchData()
            },
            methods: {
                fetchData: function () {
                    if (this.loading) {
                        // 報錯
                        return
                    }
                    this.loading = true
                    this.loaded = false
                    this.$http.get(URLRouter.list).then(resp => {
                        this.featureFlagList = resp
                        this.loaded = true
                    }).finally(err => {
                        this.loading = false
                    })
                },
                handleChange: function (row) {
                    this.$http.post(URLRouter.detail,
                        {
                            name: row.name,
                            effect: row.effect
                        }
                    ).then(() => {
                        this.fetchData()
                    })
                },
                updateOrCreate: function () {
                    if (!this.form.feature) {
                        this.$bkMessage({theme: 'error', message: `添加特性时，必须选择某个具体的应用特性`})
                        return
                    }
                    this.$http.post(URLRouter.detail,
                        {
                            name: this.form.feature,
                            effect: this.form.isEffect
                        }
                    ).then(() => {
                        this.fetchData()
                    })
                },
                featureToName
            }
        })
    })
</script>
<style scoped>

</style>
{% endblock %}
